import React from "react";
import Qs from 'qs'
import axios from "../../../../http";
import {NavBar, Toast} from "antd-mobile";
import {
    Form,
    Input,
    Button,
    Dialog,
    TextArea,
    DatePicker,

    Picker,
} from 'antd-mobile';
import dayjs from 'dayjs';

import {withRouter} from "react-router";
import {PRIVATE_ROUTE} from "../../../../route.constants";
class ScheduleView extends React.Component {


    constructor(props) {

        super(props);

        this.state={
            startDatePickerVisible:false,
            endDatePickerVisible:false,
            startTimePickerVisible:false,
            endTimePickerVisible:false,
            userViewList:[],
            title:'',
            memo:'',
            startDate:'',
            endDate:'',
            startTime:[],
            endTime:[]
        };

    }

    getUserIds=()=>{
        let userIds=new Array()
        let participant= this.state.userViewList;
        for(let i=0;i<participant.length;i++){
            let p=participant[i];
            let userId=p.substring(p.indexOf('_')+1,p.length);
            userIds.push(userId)
        }
        return userIds;
    }

    getUserRealNames=()=>{
        let userIds=new Array()
        let participant= this.state.userViewList;
        for(let i=0;i<participant.length;i++){
            let p=participant[i];
            let userId=p.substring(0,p.indexOf('_'));
            if(i!=0){
                userIds.push(';')
            }
            userIds.push(userId)
        }
        return userIds;
    }


    componentDidMount() {
        if(this.props.location.state!=undefined){
            this.setState(this.props.location.state);
        }
    }

    render(){
        return(
            <>
                <NavBar onBack={()=>{this.props.history.push({ pathname: this.props.location.state.prePath ,state:this.props.location.state.prePathVar})}} >查看事件</NavBar>

                <Form
                >

                    <Form.Item
                        label='事件名称：'
                        rules={[{ required: true, message: '事件名称不能为空' }]}
                    >
                        {this.state.title}
                    </Form.Item>

                    <Form.Item
                        label='开始日期'
                        trigger='onConfirm'

                    >

                        {
                            this.state.startDate ? dayjs(this.state.startDate).format('YYYY-MM-DD') : '请选择'
                        }
                    </Form.Item>
                    <Form.Item
                        label='开始时间'
                        trigger='onConfirm'

                    >

                        {this.state.startTime.length==0?'请选择':this.state.startTime[0]+":"+this.state.startTime[1]+":"+'00'}
                    </Form.Item>


                    <Form.Item
                        label='结束日期'

                    >

                        { this.state.endDate ? dayjs(this.state.endDate).format('YYYY-MM-DD') : '请选择'
                        }
                    </Form.Item>
                    <Form.Item
                        label='结束时间'

                    >

                        {this.state.endTime.length==0?'请选择':this.state.endTime[0]+":"+this.state.endTime[1]+":"+'00'}
                    </Form.Item>

                    <Form.Item  label='参与人:' >
                        {this.getUserRealNames()}
                    </Form.Item>

                    <Form.Item  label='备注:'>
                        <TextArea placeholder='' value={this.state.memo} maxLength={200} rows={4}  />
                    </Form.Item>
                </Form>
            </>


        )


    }
}

export default withRouter(ScheduleView)